<template>
    <div class="differenceDetial">
        <div class="contractNo" v-if="contractNo">合同号：{{contractNo}}</div>
        <div class="table-item">
            <div class="table-title">租金</div>
            <Table :columns="rent" :data="rentData"></Table>
        </div>

        <div class="table-item">
            <div class="table-title">费用</div>
            <Table :columns="cost" :data="costData">
                <!-- 类型 -->
                <template slot-scope="{ row }" slot="type">
                    <span>{{getTitle('feeType',row.type)}}</span>
                </template>
            </Table>
        </div>

        <div class="table-item">
            <div class="table-title">逾期利息</div>
            <Table :columns="interest" :data="interestData"></Table>
        </div>
        <div class="total">
            <span>总计：</span>
            <span>{{total}}</span>
        </div>
    </div>
</template>

<script>
    import {
        getAssetsRepaymentList,
        getExpenseRecordList,
        getPenaltyInterestList
    } from "_p/basic/api/contract/contract-close/index";
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";

    export default {
        name: "expenseInfo",
        components: {},
        props: {
            dataDict: {
                type: Object,
                required: true
            },
            differenceModal: {
                type: Boolean,
                require: true
            },
            contractNo: {
                type: String
            }
        },
        data() {
            return {
                loading: true,
                // 租金
                rent: [
                    {
                        title: "期数",
                        key: "termNo"
                    },
                    {
                        title: "本金",
                        key: "rent"
                    },
                    {
                        title: "利息",
                        key: "interest"
                    },
                    {
                        title: "小计",
                        key: "subtotal"
                    }
                ],
                rentData: [],
                // 费用
                cost: [
                    {
                        title: "类型",
                        key: "type",
                        slot: 'type',
                    },
                    {
                        title: "费用",
                        key: "cost"
                    },
                    {
                        title: "小计",
                        key: "subtotal"
                    }
                ],
                costData: [],
                // 逾期利息
                interest: [
                    {
                        title: "期数",
                        key: "termNo"
                    },
                    {
                        title: "逾期罚息",
                        key: "penalty"
                    },
                    {
                        title: "小计",
                        key: "subtotal"
                    }
                ],
                interestData: []
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getAssetsRepayment();
                this.getExpenseRecord();
                this.getPenaltyInterest();
            },
            getAssetsRepayment() {
                getAssetsRepaymentList(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.rentData = res.data;
                    }
                });
            },
            getExpenseRecord() {
                getExpenseRecordList(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.costData = res.data;
                    }
                });
            },
            getPenaltyInterest() {
                getPenaltyInterestList(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.interestData = res.data;
                    }
                });
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }
        },
        computed: {
            total() {
                const {rentData, costData, interestData} = this;
                let num = 0, sum = 0;
                rentData.forEach(e => {
                    rentData[num] ? (sum += Number(rentData[num].subtotal)) : "";
                    num++;
                });
                costData.forEach(e => {
                    costData[num] ? (sum += Number(costData[num].subtotal)) : "";
                    num++;
                });
                interestData.forEach(e => {
                    interestData[num] ? (sum += Number(interestData[num].subtotal)) : "";
                    num++
                });
                return sum.toFixed(2);
            }
        },
    };
</script>
<style scoped lang="less">
    .table-item {
        position: relative;
        // padding: 3px;
        padding-top: 16px;
        margin-bottom: 18px;
        border: 1px solid #e8eaec;
        border-bottom: none;
    }

    .table-title {
        position: absolute;
        top: 0;
        left: 12px;
        padding: 2px 6px;
        transform: translateY(-50%);
        background: #fff;
    }

    .total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-flow: row nowrap;

        span {
            display: inline-block;
            width: 25%;
            padding-left: 18px;
            padding-right: 18px;
        }
    }

    .contractNo {
        padding-bottom: 16px;
    }
</style>
